<html>
<head>
  <script
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
  function reload() {
    $.get("/fetch/{{doc}}", function(data) {
      $("#holder").html(data);
      setTimeout(reload, 100);
    });
  }

  $(function() {
    reload();
  });
  </script>
  <style>
  .editor {
    float: left;
    width: 300px;
    border: thin solid black;
    padding: 10px;
    margin: 20px;
    border-radius: 10px;
  }
  .messages {
    float: left;
    width: 300px;
    border: thin solid black;
    padding: 10px;
    margin: 20px;
    border-radius: 10px;
    font-family: sans-serif;
    font-size: 9px;
  }
  .messages h1 {
    font-size: 12pt;
  }
  </style>
</head>
<body>
  <div class="editor">
    <form method="post">
      <textarea name="post"></textarea>
      <br/>
      <input type="submit" value="Post"></input>
    </form>
  </div>
  <div class="messages">
    <h1> {{flash}} </h1>
    <h1> Realtime messages </h1>
    <div id="holder"></div>
  </div>
  </html>
</body>
